<template>
	<view class="publish-order">
		<view class="top-notice" v-if="notice">
			<notice-bar showIcon backgroundColor="#F6F6F6" color="#E7404A" :text="notice" single scrollable></notice-bar>
		</view>
		<view class="product-box">
			<image :src="goodInfo.goods_img_url" :webp="true" mode="aspectFill" class="product-img"></image>
			<view class="product-info">
				<view class="product-title">{{goodInfo.goods_name}}<text v-if="goodInfo.goods_specification">（{{goodInfo.goods_specification}}）</text></view>
				<view class="product-tip" v-if="isLoad">心愿得到{{goodInfo.need_people}}人支持后, 你可获得该好物</view>
			</view>
		</view>
		<view class="receipt-box">
			<view class="receipt-box-title">
				收货信息
			</view>
			<view class="receipt-info" @click="goAddressList">
				<view class="contact-info">
					<template v-if="receiptInfo&&receiptInfo.receive_name">
						<text class="contact-name">{{receiptInfo.receive_name}}</text>
						<text class="contact-phone">{{receiptInfo.receive_phone}}</text>
					</template>
					<template v-else>
						<text class="iconfont icon-add-bg add-icon"></text>
						<text class="no-tip">手动添加收货地址</text>
					</template>
					<text class="iconfont icon-right"></text>
				</view>
				<view class="address-info" v-if="receiptInfo">
					{{receiptInfo | address}}
				</view>
			</view>
			<view class="receipt-info wechat" v-if="!receiptInfo&&isLoad" @click="openWechatAddress">
				<view class="contact-info">
					<text class="iconfont icon-wechat add-icon"></text>
					<text class="no-tip">一键获取微信地址</text>
					<text class="iconfont icon-right"></text>
				</view>
			</view>
		</view>
		<view class="aggreement-box" @click="isAgree=!isAgree">
			<text class="iconfont icon-correct  check-icon" :class="{active:isAgree}"></text>
			<view class="aggreement-content">
				我同意 <text class="aggreement-link" @click.stop="goAggrement">《心愿圈服务协议》</text>
			</view>
		</view>
		<view class="bottom-box">
			<view class="use-coin">
				使用 <text class="iconfont icon-heart"></text> <text>{{goodInfo.need_wish_coin}}</text>
			</view>
			<view class="bottom-btn disabled" v-if="coinNum<goodInfo.need_wish_coin">
				心愿值不足
			</view>
			<view class="bottom-btn disabled" v-else-if="goodInfo.stock<=0">
				库存不足
			</view>
			<view class="bottom-btn" :class="{disabled:!isAgree}" v-else @click="onBottomClick">
				确认
			</view>
		</view>
		<confirm-popup :visible.sync="notCanShow" popupClass="not-popup" :content="notTip" :confirmText="notBtn" :showCancel="false" @confirm="onNotConfirm"></confirm-popup>
		<uni-popup ref="success" type="center"  entryMode="zoom-in" :showClose="false">
			<image src="/static/support-success.png" mode="aspectFill" class="support-success-bg"></image>
		</uni-popup>
	</view>
</template>

<script>
	import { mapGetters } from 'vuex'
	import {authorize} from '@/common/common.js'
	import uniPopup from '@/components/uni-popup/uni-popup.vue'
	import NoticeBar from '@/components/uni-notice-bar/uni-notice-bar.vue'
	import ConfirmPopup from '@/components/confirm-popup.vue'
	export default {
		components:{NoticeBar,ConfirmPopup,uniPopup},
		data() {
			return {
				goodsId:'',
				goodInfo:{},
				receiptInfo:'',
				isLoad:false,
				isAgree:true,
				notice:'',
				notBtn:'',
				notTip:'',
				notCanShow:false
			};
		},
		computed:{
			...mapGetters([
				'coinNum'
			])
		},
		onLoad(data){
			this.$store.dispatch('getUserInfo')
			this.goodsId=data.goods_id
			this.getDetail()
			uni.$on('updateAddress',(data)=>{
				this.receiptInfo=data
			})
		},
		onShow(){
		},
		methods:{
			async getDetail(){
				let data = await this.$api.preOrder({goods_id:this.goodsId})
				this.goodInfo=data.goods_info
				this.receiptInfo=data.address_info
				this.notice=data.initiate_tips
				this.isLoad=true
				return data
			},
			onBottomClick(){
				if(!this.isAgree){
					return
				}
				if(!this.receiptInfo){
					return uni.showToast({
						icon:'none',
						title: '请先填写收货信息'
					})
				}
				this.publishWish()
			},
			async publishWish(){
				let data = await this.$api.pbulishWish({
					goods_id:this.goodsId,
					my_wish:'',
					address_id:this.receiptInfo.address_id,
					can_free:this.goodInfo.can_free
				})
				if(data.not_can_free){
					this.notBtn=data.not_can_free===1?'立即刷新':'明天再来'
					this.notTip=data.not_can_free_tips
					this.notCanShow=true
					uni.$emit('refreshGoods')
					return
				}
				data={
					group_id:data.group_id,
					need_people:data.wish_info.need_people,
					get_wish_coin:data.wish_info.get_wish_coin,
					wish_coin_num:data.wish_coin_num,
					goods_img_url:data.wish_info.goods_img_url,
					success_tips:data.can_free_support===1?data.initiate_wish_success_free_support_tips:data.success_tips_110,
					// support_txt:data.support_txt,
					share_button_txt:data.share_button_txt,
					bubble_tips:data.initiate_wish_success_bubble_tips,
					can_free_support:data.can_free_support
				}
				uni.requestSubscribeMessage({
					tmplIds:['BpEPpz8rVf2mVEzd6pQNsFXR2X5x5uuFq1W0fLMkYcM','nRV0Tbg8hLCVOQiaC-fpFgz-VZMApep8HUxXa96F5NE','_k_imYUYQsgyJZBxGoN-VwTmwlN09jJhLCaSpQgbB34'],
					complete:()=>{
						data=encodeURIComponent(JSON.stringify(data))
						uni.$emit('showInvite',data)
						this.$refs.success.open()
						setTimeout(()=>{
							uni.redirectTo({
								url:`success?wish=${data}`
							})
							setTimeout(()=>{
								this.$refs.success.close()
							},2000)
						},2000)
					}
				})
			},
			onNotConfirm(){
				uni.navigateBack()
			},
			goAddressList(){
				let url='/pages/receipt/manage?from=order'
				if(this.receiptInfo){
					url+='&address_id='+this.receiptInfo.address_id
				}
				uni.navigateTo({
					url,
					fail(res){
						console.log(res)
					}
				})
			},
			openWechatAddress(){
				authorize('address',()=>{
					uni.chooseAddress({
						success:res=>{
							this.addAddress(res)
						}
					})
				},'请在设置中允许使用通讯地址')
			},
			goAggrement(){
				uni.navigateTo({
					url:'/pages/my/aggrement'
				})
			},
			async addAddress(data){
				let res = await this.$api.addAdress({
					user_name:data.userName,
					province_name:data.provinceName,
					city_name:data.cityName,
					county_name:data.countyName,
					detail_info:data.detailInfo,
					tel_number:data.telNumber,
					postal_code:data.postalCode,
					is_wx:1,
					original_data:JSON.stringify(data),
					is_default:1,
				})
				await this.getDetail()
				uni.showToast({
					icon:'success',
					title:'导入成功'
				})
			}
		}
	}
</script>

<style lang="scss">
.publish-order{
	min-height: 100%;
	background-color: #F6F6F6;
	padding-bottom: calc(98rpx + var(--safe-area-inset-bottom));
}
.product-box{
	display: flex;
	padding: 40rpx 36rpx;
	margin-bottom: 20rpx;
	background-color: #fff;
}
.product-img{
	width: 180rpx;
	height: 180rpx;
	margin-right: 30rpx;
	border-radius: 4rpx;
}
.product-info{
	flex: 1;
}
	
.product-title{
	min-height: 140rpx;
	font-size: 30rpx;
}
.product-tip{
	font-size: 28rpx;
	color: #999;
}
.receipt-box{
	padding: 20rpx 0 10rpx;
	margin-bottom: 20rpx;
	background-color: #fff;
}
.receipt-box-title{
	padding:0 0 20rpx 36rpx;
	font-size: 26rpx;
	border-bottom:1rpx solid #F0F0F0;
}
.receipt-info{
	padding: 30rpx 36rpx;
	&.wechat{
		border-top: 1rpx solid #F0F0F0;
	}
}
.contact-info{
	display: flex;
	align-items: center;
	position: relative;
	padding-right: 29rpx;
	font-size: 32rpx;
	font-weight:600;
	.icon-right{
		position: absolute;
		top:50%;
		right: 0;
		transform: translateY(-50%);
		font-size: 28rpx;
		color:#CBCBCB;
	}
}
.add-icon{
	margin-right: 16rpx;
	font-size: 46rpx;
	color: #CBCBCB;
	font-weight: normal;
}
.contact-name{
	margin-right: 20rpx;
}
.no-tip{
	color:#999;
}
.address-info{
	margin-top: 20rpx;
	font-size: 26rpx;
	padding-right: 29rpx;
	color: #666;
}
.aggreement-box{
	display: flex;
	padding-left: 26rpx;
	align-items: center;
}
.check-icon{
	font-size: 36rpx;
	margin-right: 4rpx;
	margin-top: 2rpx;
	color:#999;
	&.active{
		color:#E7404A;
	}
}
.aggreement-content{
	font-size: 26rpx;
	color:#999;
}
.aggreement-link{
	color: #E7404A;
}
.bottom-box{
	display: flex;
	align-items: center;
	position: fixed;
	left: 0;
	bottom: 0;
	height: 98rpx;
	width: 100%;
	padding-bottom: var(--safe-area-inset-bottom);
	background-color: #fff;
	box-sizing: content-box;
}
.use-coin{
	height: 100%;
	padding-left: 36rpx;
	display: flex;
	flex: 1;
	align-items: center;
	font-size: 26rpx;
	box-shadow:0px -2rpx 20rpx 0px rgba(0,0,0,0.06);
	text{
		color:#E7404A;
		font-size: 32rpx;
	}
	.iconfont{
		margin-left: 16rpx;
		margin-right: 9rpx;
	}
}
.bottom-btn{
	display: flex;
	align-items: center;
	justify-content: center;
	width: 300rpx;
	height: 100%;
	font-size: 36rpx;
	color:#fff;
	background-color: #E7404A;
	&.disabled{
		background-color: #999999;
	}
}
.support-success-bg{
	width: 520rpx;
	height: 500rpx;
}
.not-popup{
	.primary-btn{
		width: 100%!important;
		max-width: initial!important;
	}
}
</style>
